<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="top">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item>查看公告</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card shadow="always">
    <div class="notice_container">
      <div class="header">
        <div class="scroll-text" ref="scrollText">
          <i class="el-icon-s-opportunity"></i>
          {{ text }}
          <i class="el-icon-s-opportunity"></i>
        </div>
      </div>
      <div class="banner">
        <div class="banner_header"><p>近期公告</p></div>
        <div
          class="banner_main"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div class="banner_main_item" v-for="item in noticeList" :key="item.noticeId">
            <div class="banner_main_item_header">
              <p>{{ item.noticeTitle }} {{ item.createTime }}</p>
            </div>

            <div class="banner_main_item_main">
              <p>{{ item.noticeContent }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getNotices } from "../../api/api";

let text = "图书馆公告栏,记得查收公告呀!请同学们爱护书籍";
const scrollText = ref(null);

const noticeList = ref();
const loading = ref(true);

const getRuleList = () => {
  getNotices()
    .then(res => {
      noticeList.value = res.data;
      console.log(noticeList.value);
      ElMessage({
        message: "获取信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取信息失败");
    });
  loading.value = false;
};

onMounted(() => {
  const containerWidth = scrollText.value.offsetWidth;
  const textWidth = scrollText.value.scrollWidth;

  // If the text is longer than the container, start the animation
  if (textWidth > containerWidth) {
    this.$refs.scrollText.style.animation = "scroll 10s linear infinite";
  }

  getRuleList();
});
</script>

<style lang="less" scoped>
.notice_container {
  height: 500px;
}
.header {
  width: 100%;
  height: 50px;
  background-color: #f2f3f5;
  border-radius: 15px;
  // box-shadow: 0px 0px 5px 5px rgb(66, 142, 5);
  color: rgb(0, 0, 0);
  text-align: center;
  line-height: 50px;
  font-size: 24px;
}
.scroll-text {
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.banner {
  width: 100%;
  height: 100%;
  // background-color: pink;
  margin-top: 30px;
}
.banner_header {
  width: 100%;
  height: 80px;
  // background-color: brown;

  p {
    color: black;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
  }
}
.banner_main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(0, 0, 0);
}

.banner_main_item:nth-child(n + 2) {
  margin-top: 30px;
}
.banner_main_item:nth-child(n + 2) {
  background-color: #ffffff;
}
.banner_main_item:nth-child(1) {
  background-color: #e5e6eb;
  border-radius: 35px;
}

.banner_main_item {
  width: 80%;
  height: 120px;
  // background-color: aqua;
  .banner_main_item_header {
    width: 100%;
    height: 50px;
    border: 1px solid rgb(255, 255, 255);
    box-sizing: border-box;
    p {
      color: rgb(0, 0, 0);
      text-align: center;
      // line-height: 50px;
      font-size: 16px;
    }
  }
  .banner_main_item_main {
    width: 100%;
    height: 70px;
    background-color: #f2f3f5;
    border: 1px solid rgb(255, 255, 255);
    box-sizing: border-box;
    text-align: center;
    p {
      line-height: 40px;
    }
  }
}
</style>
